import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      // 去掉右上角debug标识
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ),
  );
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

// TODO   with SingleTickerProviderStateMixin
class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override

  // TODO 初始化生命周期，定义 TabController
  void initState() {
    super.initState();
    _tabController = TabController(length: 8, vsync: this);
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('你好flutter12'),
        backgroundColor: Colors.red,
        // 左侧图表
        leading: IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {},
        ),
        // 右侧图表
        actions: [
          IconButton(onPressed: () {}, icon: Icon(Icons.search)),
          IconButton(onPressed: () {}, icon: Icon(Icons.more_horiz)),
        ],
        // TODO 定义顶部tabbar，配合TabBarView使用
        bottom: TabBar(
          controller: _tabController,// 控制器
          tabAlignment: TabAlignment.start, // tab 靠左显示
          isScrollable: true, // tab数量过多时可滚动
          indicatorColor: Colors.teal, // 滚动指示器颜色
          // indicatorWeight: 2, // 滚动指示器高度
          indicatorSize: TabBarIndicatorSize.tab, // 指示器长度
          // 文字颜色
          labelColor: Colors.blue,
          // 文字颜色-未选中
          unselectedLabelColor: Colors.white,
          // 文字样式
          labelStyle: const TextStyle(fontSize: 20),
          // 文字样式-未选中
          unselectedLabelStyle: const TextStyle(fontSize: 14),
          // 选中容器样式
          indicator: const BoxDecoration(
            color: Color.fromARGB(255, 138, 233, 30),
          ),
          tabs: const [
            Tab(child: Text('关注')),
            Tab(child: Text('热门')),
            Tab(child: Text('视频')),
            Tab(child: Text('视频')),
            Tab(child: Text('视频')),
            Tab(child: Text('视频')),
            Tab(child: Text('视频')),
            Tab(child: Text('视频')),
          ],
        ),
      ),
      // TODO tabbar对应组件TabBarView，，配合tabbar使用
      body: TabBarView(
        // 控制器
        controller: _tabController,
        children: [
          ListView(
            children: const [
              ListTile(title: Text('我是 关注 列表')),
            ],
          ),
          ListView(
            children: const [
              ListTile(title: Text('我是 热门 列表')),
            ],
          ),
          ListView(
            children: const [
              ListTile(title: Text('我是 视频 列表')),
            ],
          ),
          Text('视频'),
          Text('视频'),
          Text('视频'),
          Text('视频'),
          Text('视频'),
        ],
      ),
    );
  }
}
